<template>
    <div class="dashboard-container">
        <div class="btn" style="margin-bottom:10px;">
            <el-button type="primary" size="mini" @click="submint">对比</el-button>
            <el-button size="mini" @click="resetFrom">重置</el-button>
        </div>

        <div class="sjbdContent" :style="{'height':$store.state.app.windowHeight }">
            <div class="top">
                <div class="mybtn" @click="showRowContent">+</div>
                <div class="mybtn" @click="closeRowContent">-</div>
            </div>
            <div class="topleft">
                A<span></span>B
            </div>
            <div class="center">
                <div class="left">
                    <div class="mybtn leftBtn" @click="showColContent">+</div>
                    <div class="mybtn leftBtn" @click="closeColContent">-</div>
                </div>
                <div class="content">
                    <div class="rowContetn" :style="{'top':rowTop}" ref="rowContetn">

                        <div class="time">
                            <div class="radioBx">
                                <el-radio v-model="rowData.radio" label="按时间">按时间</el-radio>
                            </div>

                            <div class="flex">
                                <span style="display:block;width:110px;line-height:28px;font-size:14px;font-weight:500;color: #606266;">企业名称：</span>
                                <el-input v-model="asjFrom.nsrmc" size="mini" placeholder=""></el-input>
                            </div>
                            <div class="flex" style="margin-top:8px;">
                                <span style="display:block;width:110px;line-height:28px;font-size:14px;font-weight:500;color: #606266;">时间：</span>
                                <el-date-picker style="width:100%" size="mini" v-model="asjFrom.date1" type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div class="flex" style="margin-top:8px;">
                                <span style="display:block;width:110px;line-height:28px;font-size:14px;font-weight:500;color: #606266;">报表类型：</span>
                                <el-select v-model="asjFrom.flag" placeholder="请选择" size="mini">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <!-- <div class="flex" style="margin-top:8px;">
                                <div style="width:49.5%;margin-right:1%">
                                    <el-date-picker style="width:100%" size="mini" v-model="asjFrom.date1" type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                    </el-date-picker>
                                </div>

                                <div style="width:49.5%">
                                    <el-date-picker style="width:100%" size="mini" v-model="asjFrom.date2" type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                    </el-date-picker>
                                </div>
                            </div> -->
                        </div>
                        <div>
                            <div class="radioBx">
                                <el-radio v-model="rowData.radio" label="按企业">按企业</el-radio>
                            </div>
                            <div class="flex">
                                <span style="display:block;width:110px;line-height:28px;font-size:14px;font-weight:500;color: #606266;">时间：</span>
                                <el-date-picker size="mini" v-model="aqyFrom.date1" value-format="yyyy-MM" type="monthrange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>

                            </div>
                            <div class="btnC" style="margin-left:10px;margin-top:5px;">
                                <el-button type="danger" size="mini" class="mybtnc" @click="delList()"><i class="el-icon-minus"></i></el-button>
                                <el-button type="danger" size="mini" class="mybtnc" @click="addList()"><i class="el-icon-plus"></i></el-button>
                            </div>
                            <el-table :data="aqyFrom.list" border style="width: 100%;margin-top:8px;" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55" align="center"></el-table-column>
                                <el-table-column type="index" width="55" align="center" :index="indexMethod" label="序号">
                                </el-table-column>
                                <el-table-column prop="nsrmc" label="企业名称">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-input size="mini" v-model="scope.row.nsrmc" placeholder=""></el-input>
                                        </div>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </div>
                        <div>
                            <div class="radioBx">
                                <el-radio v-model="rowData.radio" label="3">按表单</el-radio>
                            </div>
                            <div class="flex">
                                <span style="display:block;width:110px;line-height:28px;font-size:14px;font-weight:500;color: #606266;">企业名称：</span>
                                <el-input v-model="rowData.abd" size="mini" placeholder=""></el-input>
                            </div>
                            <div class="flex" style="margin-top:8px;">
                                <span style="display:block;width:110px;line-height:28px;font-size:14px;font-weight:500;color: #606266;">时间：</span>
                                <el-date-picker size="mini" v-model="rowData.value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div class="treebox">
                                <el-tree :data="treeDatas" ref="tree" class="stafftree" :show-checkbox="true" @check="handleCheckChange" @node-click="handleNodeClick" node-key="id" highlight-current>
                                </el-tree>
                            </div>
                        </div>
                        <div style="margin-top:20px;text-align:center">
                            <el-button type="primary" size="mini " @click="rowRowSave">保存</el-button>
                        </div>
                    </div>
                    <div class="colContetn" :style="{'left':colLeft}" ref="colContetn">
                        <el-tree :data="treeDatas" ref="tree2" class="stafftree" :show-checkbox="true" @check="handleColCheckChange" node-key="id" highlight-current>
                        </el-tree>
                        <div style="margin-top:20px;text-align:center">
                            <el-button type="primary" size="mini " @click="rowColSave">保存</el-button>
                        </div>
                    </div>
                    <el-table :data="resultData" border style="width: 100%;z-index:11;overflow-y: auto; " :height="'100%'" v-loading="resultLoading" >
                        <el-table-column v-for="(item,key) in resultColumn" :key="key" :prop="item.prop" :label="item.label" :align="item.align" :min-width="item.minWidth">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { bdAsj, bdAqy } from '@/api/tzyy/sjdb'
export default {
    data() {
        return {
            height: '',
            rowFlag: true,
            asjFrom: {
                nsrmc: '',
                date1: [],
                date2: [],
                flag: ''
            },
            options: [
                {
                    value: '1',
                    label: '季报'
                },
                 {
                    value: '3',
                    label: '月报'
                },
                {
                    value: '2',
                    label: '年报'
                },
            ],
            aqyFrom: {
                nsrmc: '',
                date1: [],
                list: []
            },
            rowData: {
                region: '',
                value1: '',
                radio: ''
            },
            rowData: [],
            rowTop: 0,
            colLeft: '-400px',
            treeDatas: [{
                label: '申报表',
                id: '申报表',
                children: [
                    {
                        label: '增值税申报表',
                        id: '增值税申报表',
                    },
                    {
                        label: '企业所得税申报表',
                        id: '企业所得税申报表',
                    },
                ]
            }, {
                label: '财务表',
                id: '财务表',
                children: [{
                    label: '资产负债表',
                    id: '资产负债表'

                }, {
                    label: '现金流量表',
                    id: '现金流量表'

                }, {
                    label: '利润表',
                    id: '利润表'

                }]
            }],
            checkTreeArr: [],
            checkColTreeArr: [],
            rowFlag: false,
            colFlag: false,
            submintFlag: false,
            resultColumn: [
                {
                    label: '表单',
                    prop: 'bd',
                    minWidth:180,
                    align: 'center',
                },
                {
                    label: '项目名称',
                    prop: 'xmmc',
                     minWidth:180,
                    align: 'center',
                },
            ],
            resultData: [],
            resultLoading: false,
            listNum: 0,
            multipleSelection: [],
            isCwbb: false
        }
    },
    computed: {

    },
    mounted() {
        this.$nextTick(() => {
            this.rowTop = -(this.$refs.rowContetn.offsetHeight) + 'px'
            this.colLeft = -(this.$refs.colContetn.offsetWidth) + 'px'
        })

    },
    methods: {
        submint() {
            this.resultColumn = [
                {
                    label: '表单',
                    prop: 'bd',
                    minWidth:180,
                    align: 'center',
                },
                {
                    label: '项目名称',
                    prop: 'xmmc',
                      minWidth:180,
                    align: 'center',
                },
            ]
            if (this.rowFlag && this.colFlag) {
                if (this.rowData.radio == '按时间') {
                    if(this.checkColTreeArr[0]=='增值税申报表' && this.asjFrom.flag==''){
                         this.$message.error('财务报表类型不能为空')
                    }
                    let param = {
                        kssj: this.asjFrom.date1[0],
                        jssj: this.asjFrom.date1[1],
                        // kssj2: this.asjFrom.date2[0],
                        // jssj2: this.asjFrom.date2[1],
                        flag: this.isCwbb ? this.asjFrom.flag : '',
                        nsrmc: this.asjFrom.nsrmc,
                        bglx: this.checkColTreeArr
                        // bglx: this.checkColTreeArr[0]
                    }
                    this.resultLoading = true
                    bdAsj(param).then(res => {
                        console.log(res)
                        this.resultLoading = false
                        if (res.code == 200) {
                            for (let key in res.data[0]) {
                                if (key != 'bd' && key != 'xmmc') {
                                    this.resultColumn.push({
                                        label: key + '',
                                        prop: key + '',
                                        isShow: true,
                                        minWidth:180,
                                        align: 'center',
                                    })
                                }

                            }
                            this.resultData = res.data
                        }
                    })
                } else if (this.rowData.radio == '按企业') {
                    let list = []
                    for (let i = 0; i < this.aqyFrom.list.length; i++) {
                        list.push(this.aqyFrom.list[i].nsrmc)
                    }

                    let param = {
                        kssj: this.aqyFrom.date1[0],
                        jssj: this.aqyFrom.date1[1],
                        list: list,
                        bglx: this.checkColTreeArr
                    }
                    this.resultLoading = true
                    bdAqy(param).then(res => {
                        this.resultLoading = false
                        if (res.code == 200) {
                            for (let key in res.data[0]) {
                                if (key != 'bd' && key != 'xmmc') {
                                    this.resultColumn.push({
                                        label: key + '',
                                        prop: key + '',
                                        isShow: true,
                                        minWidth:180,
                                        align: 'center',
                                    })
                                }

                            }
                            this.resultData = res.data
                        }
                    })
                }
            } else {
                this.$message.error('请选择对比数据')
                return false
            }

        },
        resetFrom() {
            this.resultColumn = [
                {
                    label: '表单',
                    prop: 'bd',
                    align: 'center',
                },
                {
                    label: '项目名称',
                    prop: 'xmmc',
                    align: 'center',
                },
            ]
            this.resultData = []
            //按时间W
            this.asjFrom.nsrmc = ''
            this.asjFrom.date1 = []
            this.asjFrom.date2 = []


            this.aqyFrom.list = []
            this.aqyFrom.date1 = []

            this.rowFlag = false
            this.colFlag = false

            //col表单
            this.checkColTreeArr = []
        },
        rowRowSave() {
            console.log(this.rowData.radio)
            if (this.rowData.radio == '按时间') {
                if (this.asjFrom.nsrmc == '') {
                    this.$message.error('企业名称不能为空')
                    return false
                } else if (this.asjFrom.date1.length <= 0) {
                    this.$message.error('请选择时间')
                    return false
                } else if (this.asjFrom.flag == '') {
                    this.$message.error('请选择财务报表类型')
                    return false
                }
                this.rowFlag = true
                this.rowTop = -(this.$refs.rowContetn.offsetHeight) + 'px'
            } else if (this.rowData.radio == '按企业') {
                if (this.aqyFrom.date1.length <= 0) {
                    this.$message.error('请选择时间')
                    return false
                } else if (this.aqyFrom.list.length <= 0) {
                    this.$message.error('企业名称列表不能为空')
                    return false
                }
                for (let i = 0; i < this.aqyFrom.list.length; i++) {
                    if (this.aqyFrom.list[i].nsrmc == '') {
                        this.$message.error('企业名称不能为空')
                        return false
                    }
                }

                this.rowFlag = true
                this.rowTop = -(this.$refs.rowContetn.offsetHeight) + 'px'
            } else if (this.rowData.radio == undefined) {
                this.$message.error('请选择对比类型')
                return false
            }
        },
        rowColSave() {
            if (this.checkColTreeArr.length <= 0) {
                this.$message.error('请选择表格类型')
                return false
            }
            this.colFlag = true
            this.colLeft = '-400px'
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delList() {
            if (this.multipleSelection.length > 0) {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    for (let j = 0; j < this.aqyFrom.list.length; j++) {
                        if (this.multipleSelection[i].num == this.aqyFrom.list[j].num) {
                            this.aqyFrom.list.splice(j, 1)
                        }
                    }
                }
            } else {
                this.$message.error('请选择要删除的企业')
                return false
            }

        },
        addList() {
            this.listNum++
            this.aqyFrom.list.push({
                nsrmc: '',
                num: this.listNum
            })
        },
        handleColCheckChange(data, checked, indeterminate) {
            this.checkColTreeArr = []
            console.log(data, checked, 'checked', indeterminate);

            checked.checkedNodes.forEach(item => {
                if (!item.children) {

                    this.checkColTreeArr.push(item.label)

                }
            });
            for (let i = 0; i < this.checkColTreeArr.length; i++) {
                console.log(i)
                if (this.checkColTreeArr[i] == '增值税申报表') {
                    this.$message('增值税申报表只能单选')
                    this.$refs.tree2.setCheckedNodes([{
                        id:'增值税申报表',
                        label:'增值税申报表'
                    }
                        
                    ])
                    this.checkColTreeArr = ['增值税申报表']
                    this.isCwbb = false
                }else {
                      this.isCwbb = true
                }
            }
            // if (this.checkColTreeArr.length > 1) {
            //     this.$message.error('目前只支持一个类型的业务表比较,请重新选择')
            //     this.$refs.tree2.setCheckedNodes([])
            //     this.checkColTreeArr = []
            // }
            // console.log(checked.halfCheckedKeys[0])
            // if (checked.halfCheckedKeys[0] == '财务表') {
            //     this.isCwbb = true
            // } else {
            //     this.isCwbb = false
            // }
            console.log(this.checkColTreeArr)
        },
        handleCheckChange(data, checked, indeterminate) {
            this.checkTreeArr = []
            console.log(data, checked, 'checked', indeterminate);

            checked.checkedNodes.forEach(item => {
                if (!item.children) {
                    this.checkTreeArr.push(item.label)
                }
            });
            if (this.checkTreeArr.length > 1) {
                this.$message.error('目前只支持一个类型的业务表比较,请重新选择')
                this.$refs.tree.setCheckedNodes([])
                this.checkTreeArr = []
            }
            console.log(this.checkTreeArr)
        },
        showRowContent() {
            this.rowFlag = false
            this.rowTop = 0
        },
        closeRowContent() {
            this.rowFlag = true
            console.log(this.$refs.rowContetn.offsetHeight)
            this.rowTop = -(this.$refs.rowContetn.offsetHeight) + 'px'
        },
        showColContent() {
            this.colLeft = 0
        },
        closeColContent() {
            this.colLeft = '-400px'
        },
        handleNodeClick(data, node, self) {
            // 取消其他节点的选中状态
            console.log(data)
            this.$refs.tree.setCurrentKey(data.id);
            // 进行其他单选操作...
        },
        indexMethod(index) {
            return index + 1;
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    padding: 8px;
    height: 100%;
    .btn {
        text-align: center;
    }
    .sjbdContent {
        position: relative;
        height: calc(100% - 42px);
        .top {
            position: absolute;
            top: 0;
            left: 30px;
            width: calc(100% - 30px);
            height: 30px;
            line-height: 30px;
            background-color: rgba(215, 215, 215, 1);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(121, 121, 121, 1);
            border-radius: 0px;
            display: flex;
            justify-content: start;
            align-items: center;
            // padding-left: 20px;
        }
        .topleft {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            box-sizing: border-box;
            border: 1px solid rgba(215, 215, 215, 1);
            display: flex;
            justify-content: space-between;
            padding: 0 2px;
            span {
                width: 1px;
                // display: inline-block;
                height: 30px;
                background-color: rgba(215, 215, 215, 1);
            }
        }
        .center {
            display: flex;
            justify-content: start;
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            height: calc(100% - 74px);
            min-height: 600px;
            .left {
                width: 30px;
                height: 100%;
                background-color: rgba(215, 215, 215, 1);
                box-sizing: border-box;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(121, 121, 121, 1);
                border-radius: 0px;
                text-align: center;
            }
            .content {
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
                .colContetn {
                    z-index: 22;
                    height: auto;
                    width: 400px;
                    overflow-y: auto;
                    position: absolute;
                    left: 0;
                    top: 0;
                    transition: left 0.5s ease-in-out;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(242, 242, 242, 1);
                    margin-top: 10px;
                    padding: 8px;
                }
                .rowContetn {
                    z-index: 22;
                    height: auto;
                    padding: 8px;
                    width: 400px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    transition: top 0.5s ease-in-out;
                    background-color: rgba(255, 255, 255, 1);
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(242, 242, 242, 1);
                    &.active {
                        top: -99999990px;
                    }
                    .flex {
                        display: flex;
                        justify-content: start;
                        padding-left: 30px;
                    }
                }
            }
        }
    }
    .radioBx {
        margin: 8px 0;
    }
    .mybtn {
        width: 24px;
        height: 24px;
        line-height: 20px;
        border-radius: 50%;
        text-align: center;
        padding: 0;
        margin-left: 15px;
        border: 1px solid orange;
        color: orange;
        cursor: pointer;
    }
    .leftBtn {
        color: #000;
        border-color: #000;
        margin-left: 2px;
        margin-top: 15px;
    }
    .treebox {
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        height: 120px;
        overflow-y: auto;
    }
    ::v-deep .stafftree > .el-tree-node > .el-tree-node__content .el-checkbox {
        display: none;
    }
}
.btnC {
    text-align: right;
    margin-bottom: 2px;
    display: flex;
    justify-content: right;
    .mybtnc {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding: 0;
    }
}
input[aria-hidden='true'] {
    display: none !important;
}
</style>